<%@ page language="java" contentType="text/html; charset=utf-8"
	pageEncoding="utf-8"%>
<%@ include file="/common/taglibs.jsp"%>
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<%@ include file="/common/meta.jsp"%>

<script language="Javascript"
	src="${ ctx}/scripts/htmlbox/htmlbox.colors.js" type="text/javascript"></script>
<script language="Javascript"
	src="${ ctx}/scripts/htmlbox/htmlbox.styles.js" type="text/javascript"></script>
<script language="Javascript"
	src="${ ctx}/scripts/htmlbox/htmlbox.syntax.js" type="text/javascript"></script>
<script language="Javascript" src="${ ctx}/scripts/htmlbox/xhtml.js"
	type="text/javascript"></script>
<script language="Javascript"
	src="${ ctx}/scripts/htmlbox/htmlbox.min.js" type="text/javascript"></script>
<script language="Javascript"
	src="${ ctx}/scripts/htmlbox/htmlbox.undoredomanager.js"
	type="text/javascript"></script>


<link href="${ ctx}/skins/picturemodel.css" rel="stylesheet"
	type="text/css" />

<style type="text/css">
.page-content {
	width: 1200px;
	margin: 0 auto;
	border-radius: 10px;
	-moz-border-radius: 10px;
	-webkit-border-radius: 10px;
	position: relative;
	padding-top: 10px;
}

#column-main {
	width: 710px;
	float: left;
	border-left: dotted 0px;
	padding-left: 10px;
	border-left: dotted 0px;
	padding-right: 20px;
	-moz-box-shadow: 0 10px 20px #b0b3b6;
	/*我们在这里设置阴影，同时设置padding-right使得其偏向于右边，（注：需要设置boreder当然需要设置其宽度为0使其看不见）*/
	-webkit-box-shadow: 0 10px 20px #b0b3b6;
	box-shadow: 0 10px 20px #b0b3b6;
	vertical-align: middle;
}

#column-left {
	margin-right: 24px;
	padding-top: 0px;
	padding-left: 0px;
	padding-bottom: 50px;
	width: 200px;
	float: left;
}

input.button {
	background-color: rgba(47, 167, 226, 0.66);
	border: 1px solid rgb(51, 157, 189);
	color: rgb(250, 250, 252);
	cursor: pointer;
	font-size: 1em;
	height: 23px;
	padding: 2px 5px;
	vertical-align: middle;
	margin-top: 4px;
	margin-right: 10px;
}
</style>


<script language="javascript">
	$(document).ready(
			function() {
				var htmlBox = $("#myHtmlBox").css("height", "300").css("width","700").css("padding","10px 2px").htmlbox(
						{
							toolbars : [
							[ "bold", "italic", "underline", "separator","justify", "left", "center", "right","separator", "link",
							  "unlink", "separator","image", "code", "highlight" ] ],
							skin : "blue"
						});

				//  直接保存博文
			   $("#saveArticle").click(function() {
				   if($("#required").val()!=null&&$("#required").val()!=""&&$("#select_required option:selected").text()!=null&&$("#select_required option:selected").text()!="==选择博客==")
					   {
				   $("#articleFrom").attr("value","${article.type }");   //保持原来的信息不变
				   $("#form1")[0].submit();
					   }else  alert("文章标题和所属博客为必填选项");
 			  });

	});
</script>

<title>编辑文章 --- ${article.title}</title>
</head>
<body>
<body id="page-home">
	<%@ include file="/common/header.jsp"%>
	<div class='page-content'>

		<div id='column-left'><%@ include file="/common/left.jsp"%></div>

		<div id="column-main">
			<form id="form1" action="${ctx }/blog/blog.action?method:saveArticle=xxxx" method="post"  >
				<input type="hidden" name="articleId" value="${article.id }" />
				<div style="margin-bottom: 3px;">
					<strong>文章标题</strong><span
						style="color: red; margin-left: 5px; font-weight: bold">*</span> <input
						id="required" maxlength="80" name="article.title" size="45"
						style="width: 350px; border: 1px solid grey; height: 20px;"
						type="text" value="${article.title}" />
				</div>
				<div style="margin-bottom: 10px;">
					<strong>所属博客</strong><span
						style="color: red; margin-left: 5px; font-weight: bold">*</span>
					<nativeSql:sqlQueryForList
						sql="SELECT t.*  FROM t_blog t where (f_manager_name='${me.username }' or f_type=0) "
						id="blogs" />
					<s:select name="article.blogId" list="#attr.blogs" listKey="f_id"
						listValue="f_blog_name" theme="simple" style="height:22px;" id="select_required"
						headerKey="" headerValue="==选择博客==" />
					&nbsp;&nbsp; <strong>博文标签&nbsp;&nbsp;</strong><input type="text"
						id="tag_tagName" title="请输入标签" name="article.tags"
						value="${article.tags}"
						style="border: 1px solid grey; width: 280px; height: 20px;" />&nbsp;&nbsp;(以逗号,空格区分)
				</div>

                <input id="articleFrom" type="hidden" name="articleFrom" value="-1" ><!-- 1:音乐   2：视频   3 图片   4 普通文字-->

				<textarea id='myHtmlBox' name="article.content">${article.content}</textarea>
				<input class="button"  type="button" style="float: right;"  value="保存博文" id="saveArticle"></input>
                
              </form>
		<br><br>

   
   
    <!-- 附件信息的浏览  -->
    <div style="border-top: dotted 1px;">  
	<!-- 如果该文章的类型是音乐的话 -->
		     <c:if test="${fn:contains(article.type,1)}">
					<strong>音乐预览：</strong>
					<br>
					<nativeSql:sqlQueryForList
						sql="select * from t_media t  where  f_type = 1 and f_article_id =  ${article.id }"
						id="musics" />
					<c:forEach items="${musics }" var="music">
						<div>
							<Strong style="float: left; padding-top: 8px;">${music.f_title}:</Strong>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;${music.f_html_code}
						</div>
					</c:forEach>

				</c:if>

				<c:if test="${fn:contains(article.type,2)}">
					<strong>视频预览：</strong>
					<br>
					<nativeSql:sqlQueryForList
						sql="select * from t_media t  where  f_type = 2 and f_article_id =  ${article.id }"
						id="videos" />
					<c:forEach items="${videos }" var="video">
						<div>
							土豆视频：<Strong>${video.f_title }</Strong><br>
							${video.f_html_code}
						</div>
					</c:forEach>

				</c:if>


				<c:if test="${fn:contains(article.type,3)}">
					<div class="feed-big-img">
						<!-- 关于多幅图片布局问题设计 -->
						<strong>图片预览：</strong><br>
						<nativeSql:sqlQueryForList
							sql="select  *  from t_upload_file where f_article_id = ${article.id }"
							id="articlefiles" />
						<nativeSql:sqlQueryForUnique
							sql="select  count(*) as cnt  from t_upload_file where f_article_id = ${article.id }"
							id="articlefilesCnt" />

						<c:forEach items="${articlefiles }" var="articlefile"
							varStatus="index">
							<c:if test="${articlefilesCnt.cnt >4 }">
								<img class="feed-img-4-${ index.count % 4}"
									src="${ctx}/user/file.action?method:previewPic&fileId=${articlefile.f_id}">
								<c:set value="${articlefilesCnt.cnt -1 }"
									var="articlefilesCnt.cnt"></c:set>
							</c:if>
							<c:if test="${articlefilesCnt.cnt <=4 }">
								<img
									class="feed-img-${articlefilesCnt.cnt }-${ index.count % 4}"
									src="${ctx}/user/file.action?method:previewPic&fileId=${articlefile.f_id}">
							</c:if>
						</c:forEach>
					</div>

				</c:if>

				<c:if test="${fn:contains(article.type,4)}"></c:if>
		</div>
		<br><br><br>

			

		</div>
	</div>

	<div style="clear: both;"></div>
	<%@ include file="/common/footer.jsp"%>

</body>
</html>